<template>
  <div class="album-box">
    <img :src="calcImgUrl(albumId)" style="width: 400px; height: 400px; box-shadow: var(--el-box-shadow)"/>
    <div style="display: flex;flex-direction: row; margin-top: 60px;">
      <el-icon :size="60" color="red">
        <Star />
      </el-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'album',
  props: {
    albumId : { type: String }
  },
  methods: {
    calcImgUrl(id) {
      return new URL("../assets/albums/" + id + ".jpeg", import.meta.url).href
    },
  }
}
</script>

<style scoped>
.album-box {
  width: 100%;
  height: 100%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
  